---
title: AppState
---

import { Callout } from "nextra/components";

# `AppState`

<Callout>
  The application state is unstable and is likely to experience breaking
  changes.
</Callout>

The internal state of the [`<Puck>`](/docs/api-reference/components/puck) component.

## `data`

The current [`Data`](/docs/api-reference/data-model/data) payload being managed by Puck.

## `ui`

The current state of the Puck editor interface.

| Param                                           | Example                                               | Type                          |
| ----------------------------------------------- | ----------------------------------------------------- | ----------------------------- |
| [`arrayState`](#uiarraystate)                   | `{}`                                                  | Object                        |
| [`componentList`](#uicomponentlist)             | `{ typography: { components: [ "HeadingBlock" ] } }`  | Object                        |
| [`field.focus`](#fieldfocus)                    | `"title"`                                             | String                        |
| [`isDragging`](#isdragging)                     | `false`                                               | Boolean                       |
| [`itemSelector`](#uiitemselector)               | `{ index: 0, zone: "my-content" }`                    | [ItemSelector](item-selector) |
| [`leftSideBarVisible`](#uileftsidebarvisible)   | `false`                                               | Boolean                       |
| [`leftSideBarWidth`](#uileftsidebarwidth)       | `200`                                                 | Number                        |
| [`previewMode`](#uipreviewmode)                 | `"edit"`                                              | String                        |
| [`rightSideBarVisible`](#uirightsidebarvisible) | `false`                                               | Boolean                       |
| [`rightSideBarWidth`](#uirightsidebarwidth)     | `200`                                                 | Number                        |
| [`viewports`](#uiviewports)                     | `{ controlsVisible: true, current: {}, options: [] }` | Object                        |

---

### `ui.arrayState`

An object describing the internal state of array items

---

### `ui.componentList`

An object describing the component drawer. Similar shape to the [categories API](/docs/api-reference/configuration/config#categories)

#### `ui.componentList[key].components`

Array containing the names of components in this category.

#### `ui.componentList[key].title`

Title of the category.

#### `ui.componentList[key].visible`

Whether or not the category is visible in the side bar.

#### `ui.componentList[key].expanded`

Whether or not the category is expanded in the side bar.

---

### `ui.field.focus`

The name of the currently focused field.

### `ui.field.metadata`

Metadata for the the currently focused field.

---

### `ui.isDragging`

A boolean stating whether or not the user is currently dragging a component.

---

### `ui.itemSelector`

An [`ItemSelector`](item-selector) for the currently selected item.

---

### `ui.leftSideBarVisible`

Whether or not the left side bar is visible.

---

### `ui.leftSideBarWidth`

Current width of the left side bar in pixels.

---

### `ui.previewMode`

The mode for the preview area, controlling whether or not the user can interact with the underlying component. Accepts the following values:

- **`"edit"` (default)**: Components can be dragged and modified. An overlay prevents interaction with the underlying component.
- **`"interactive"`**: Editing functionality is disabled. The user can interact with the underlying component.

Puck does not currently provide the UI to control this value, but it can be toggled via the `cmd+i` or `ctrl+i` hotkeys.

---

### `ui.rightSideBarVisible`

Whether or not the right side bar is visible.

---

### `ui.rightSideBarWidth`

Current width of the right side bar in pixels.

---

### `ui.viewports`

| Param                                            | Example                           | Type                                                                 |
| ------------------------------------------------ | --------------------------------- | -------------------------------------------------------------------- |
| [`controlsVisible`](#uiviewportscontrolsvisible) | `false`                           | Boolean                                                              |
| [`current`](#uiviewportscurrent)                 | `{ width: 1440, height: "auto" }` | Object                                                               |
| [`options`](#uiviewportsoptions)                 | `[]`                              | [Viewports\[\]](/docs/api-reference/components/puck#viewport-params) |

#### `ui.viewports.controlsVisible`

Whether or not the viewport controls are visible.

#### `ui.viewports.current`

The currently selected viewport.

| Param                                 | Example  | Type               |
| ------------------------------------- | -------- | ------------------ |
| [`width`](#uiviewportscurrentwidth)   | `1440`   | Number             |
| [`height`](#uiviewportscurrentheight) | `"auto"` | Number \| `"auto"` |

##### `ui.viewports.current.width`

The width of the current viewport.

##### `ui.viewports.current.height`

The height of the current viewport.

#### `ui.viewports.options`

The available viewport options, as provided via the [`viewports` API](/docs/api-reference/components/puck#viewports).
